<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>订单详情页</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="fonts/glyphicons-halflings-regular.woff2">
</head>
<div id="top"></div>
<div class="panel panel-default" style="margin: 5% auto;width: 95%;">
    <div class="panel-heading">
        <h3 class="panel-title"><span class="glyphicon glyphicon-equalizer"></span>&nbsp;&nbsp;订单详情</h3>
    </div>
    <div class="panel-body">
        <table class="table table-striped table-bordered table-hover">

            <tr>
                <td>订单编号</td>
                <td>订单时间</td>
                <td>总价</td>
            </tr>
            <tbody id="order-part"></tbody>
            <tr>
                <td>商品列表:</td>
                <td colspan="3">
                    <table class="table table-striped table-bordered table-hover">
                        <tr class="info">
                            <th>序号</th>
                            <th>商品封面</th>
                            <th>商品名称</th>
                            <th>商品单价</th>
                            <th>购买数量</th>
                            <th>小计</th>
                            <th>操作</th>
                        </tr>
                        <tbody id="product-part"></tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="4" style="text-align: right">
                    <a href="javascript:void(0)" onclick="window.history.back()"
                       class="btn btn-danger btn-sm">返回订单列表</a>
                    &nbsp;&nbsp;
                    <span id="wechat-pay"></span>
                </td>
            </tr>
        </table>
    </div>
</div>

<script type="text/javascript" src="js/jquery-3.6.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#top").load("top.html")
        //接收传过来的oId 并发送ajax请求
        const searchParams = new URLSearchParams(location.search);
        const oId = searchParams.get("oId");
        $.ajax({
            url: "/PDD/order?method=showOrderDetail&oId=" + oId,
            dataType: "json",
            success: function (data) {
                let orderDetails = data.data;
                //拼接订单部分
                let html1 = `<tr>
                              <td>${orderDetails[0].oid}</td>
                              <td>${orderDetails[0].time}</td>
                              <td>${orderDetails[0].totalCount.toFixed(2)}</td>
                            </tr>`
                $("#order-part").html(html1)
                //拼接订单项部分
                //let html2 = ""
                for (let i = 1; i <= orderDetails.length; i++) {
                    let orderDetail = orderDetails[i - 1]
                    let html2 = `<tr>
  <th>${i}</th>
  <th>
    <img src="image/${orderDetail.image}" width="50px" height="50px">
  </th>
  <th>${orderDetail.name}</th>
  <th>${orderDetail.price.toFixed(2)}</th>
  <th>${orderDetail.num}</th>
  <th>${orderDetail.count.toFixed(2)}</th>
  <th>
  <button id="comment${i}" type="button" class="btn btn-danger btn-sm" ></button>
  <button id="refund${i}" type="button" class="btn btn-warning btn-sm" ></button>
  </th>
</tr>`
                    $("#product-part").append(html2)
                    let comment = $("#comment" + i)
                    let refund = $("#refund" + i)
                    //发送ajax请求 查看是否有评价 确认操作中的功能(评价/查看评价)
                    $.ajax({
                        url: "/PDD/evaluation?method=showEvaluation&iid=" + orderDetail.iid,
                        dataType: "json",
                        success: function (data) {
                            //判断返回数据是否为空并且订单状态不是未支付
                            if (data.code === 404 && orderDetails[0].state !== 0) {
                                comment.html("去评价")
                                //"去评价"点击事件
                                comment.click(function () {
                                    window.location.href = "evaluation.html?iid=" + orderDetail.iid +"&pid="+orderDetail.pid
                                })
                            } else if (data.code === 200) {
                                //已评价
                                comment.html("查看我的评价")
                            }
                        },
                    })
                    if (orderDetails[0].state !== 0) {
                        //发送ajax请求 查看是否有退款
                        $.ajax({
                            url: "/PDD/order?method=showRefund&iid=" + orderDetail.iid,
                            dataType: "json",
                            success: function (data) {
                                //判断返回数据是否为空并且订单状态不是未支付
                                if (data.code === 404) {
                                    refund.html("申请退款")
                                    //"申请退款"点击事件
                                    refund.click(function () {
                                        window.location.href="refund.html?iid="+orderDetail.iid
                                    })
                                } else {
                                    let result = data.data[0]
                                    if (result.rState === 0) {
                                        refund.html("退款失败")
                                    } else if (result.rState === 1) {
                                        refund.html("审核中")
                                    } else if (result.rState === 2) {
                                        refund.html("退款成功")
                                    }
                                }
                            }
                        })
                    }

                }

                /*//微信支付
                let wechatPay=$("#wechat-pay")
                if(parseInt(orderDetails[0].state)===0) {
                    let html = `<button type="button" class="btn btn-success btn-sm">微信支付</button>`
                    wechatPay.html(html)
                }*/

                /*//微信支付点击事件
                wechatPay.click(function (){
                    $.ajax({
                        url:"/PDD/user?method=modifyBalance",
                        data:{
                            "totalCount":orderDetails[0].totalCount.toFixed(2),
                            "oId":orderDetails[0].id
                        },
                        dataType: "json",
                        success:function (data){
                            if(data.code===-1){
                                alert(data.data)
                            }else{
                                alert("支付成功")
                            }
                        }
                    })
                })*/
            }
        })

    })
</script>
</body>
</html>